<template>
  <div class="city-colony-container">
    <div class="title">{{ title }}</div>
    <div class="content">
      <div class="city-item" v-for="(item,index) in list" :key="index">
        <nut-button @click="clickItem(item)" shape="square" type="default" size="small" block>{{item.cityName}}</nut-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const emit = defineEmits(['clickItem'])
const clickItem = (item) => {
  emit('clickItem',item)
};
defineProps({
  title: {
    type: String,
  },
  list: {
    type: Array<any>,
  },
});
</script>
<style lang="less">
.city-colony-container {
  display: flex;
  flex-direction: column;
  .title {
    flex: 1;
    padding: 0.5rem 1rem;
    font-size: 0.6rem;
    color: #c4c6cd;
  }
  .content {
    .city-item {
      display: inline-block;
      padding: 0;
      margin: 0 0 0.5rem 0.5rem;
      width: 5.5rem;
    }
  }
}
</style>
